
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="applicable-device" content="mobile" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="msapplication-tap-highlight" content="no" />
	<title>员工防疫动态</title>
	<link rel="stylesheet" href="static/css/vue/index.css">
	<script type="text/javascript">
		document.write("<link rel='stylesheet' type='text/css' href='static/css/metro.css?random="+Math.random()+"'/>");
	</script>
	<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css"/>
	<script type="text/javascript" src="static/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="static/js/echarts.min.js"></script>
	<script type="text/javascript" src="static/app/js/china.js"></script>
	<script type="text/javascript" src="static/js/dateUtil.js"></script>
	<script type="text/javascript">
		document.write("<script type='text/javascript' src='static/js/planCurrLimi.js?random="+Math.random()+"'></s"+"cript>");
	</script>

	<script src="static/js/vue/vue.js"></script>
	<script src="static/js/vue/index.js"></script>
	<script>
		+ function() {
			remLayout();

			function remLayout() {
				var w = document.documentElement.clientWidth;
				w = w > 768 ? 768 : w;
				w = w <= 320 ? 320 : w;
				document.documentElement.style.fontSize = w / 7.5 + 'px';
			}
			window.addEventListener('resize', function() {
				remLayout();
			}, false);
		}();
	</script>
	<style>
		.tab_loading {
			width: 3rem;
			height: 3rem;
			text-align: center;
			line-height: 3rem;
			background: #000;
			opacity: 0.8;
			color: #fff;
			border-radius: 10px;
			position: absolute;
			top: 4rem;
			left: 2rem;
		}
		html,body,.tab-pane,.section,.ul {
			height: 100%;
		}
		.tab-content {
			height: calc(100% - 2.7rem);
		}
		.ul .li {
			height: 100%;
			padding-bottom: 0.42rem;
		}
		.sec_map {
			height: calc(100% - 2rem);
			overflow: scroll;
		}
	</style>
</head>


<body>
<header>
	<div class="headers" id="headers">
		<div class="text_left">
			<span>上海地铁防疫动态</span>
		</div>
		<div class="text_right">
			<span>填报日期</span>
			<!--     			<p id="endDate"></p>-->
			<div class="hhmm">
				<el-button icon="el-icon-caret-left"  @click="leftButtonClick()" id="leftButton"></el-button>
				<el-date-picker
						:clearable=false
						:editable=false
						v-model="dateValue"
						@change="dateChange"
						:picker-options="pickerOptions"
						type="date"
						placeholder="">
				</el-date-picker>
				<el-button icon="el-icon-caret-right"  @click="rightButtonClick()"  id="rightButton"></el-button>
			</div>
		</div>
	</div>
</header>
<div class="tab-content">
	<div class="tab-pane active" id="a">

		<section class="section">

			<ul class="ul">
				<li class="li" style="overflow:auto;">
					<div id="loadDiv" class="tab_loading"100%>
						加载中。。。
						<!--					<i class="el-icon-loadings"></i>-->
					</div>
					<div class="sec_top">
						<div class="top_one" style="text-align: center;height: 100%">
							<span id="titleLab">计划限流</span>
						</div>
					</div>
					<div class="sec_x" style="margin: 0.1rem auto;"></div>
					<div class="sec_two_header" style="margin-top: 0.1rem;">
						<img src="static/img/ico.png"/>
						<span>填报内容</span>
					</div>
					<div class="sec_x" style="margin-top: -0.1rem;"></div>
					<div class="sec_out table-responsive" id="sec_three" style="overflow: auto;">
						<table class="table table-striped table-bordered" >
							<thead>
							<tr>
								<th style='text-align: center; font-size: 12px;'>计划限流车站</th>
								<th style='text-align: center; font-size: 12px;'>计划限流时段</th>
								<th style='text-align: center; font-size: 12px;'>实际限流时段</th>
								<th style='text-align: center; font-size: 12px;'>备注</th>
							</tr>
							</thead>
							<tbody style='text-align: center;  font-size: 12px;' id="dataList">
							</tbody>
						</table>
					</div>
				</li>
			</ul>
		</section>
	</div>
</div>
</body>
<script type="text/javascript">
	// import { Loading } from 'element-ui';
	var currentPage=3;
	new Vue({
		el: '#headers',
		data: function() {
			var day = new Date();
			day.setTime(day.getTime());
			//如果是最近一天，右侧按钮不能点击
			if(day>new Date(new Date(new Date().toLocaleDateString()).getTime())){
				$("#rightButton").attr("disabled","disabled");
				$("#rightButton").css("color","grey");
			}
			return {
				pickerOptions: {
					disabledDate: (time) => {
						//限制查询时间不能大于昨天
						return time>day;
					}
				},
				dateValue: day,
				tabLoading: false
			}
		},
		mounted(){
			window.dateChange = this.dateChange; // 方法赋值给window调用
			window.conditionDate = this.dateValue;
			console.log("window.date:"+window.conditionDate);
		},
		methods: {
			leftButtonClick(){
				//时间控件减少一天
				this.dateValue = new Date((this.dateValue.getTime()-24*60*60*1000));
				this.dateChange();
			},
			rightButtonClick(){
				//时间控件减少一天
				this.dateValue = new Date((this.dateValue.getTime()+24*60*60*1000));
				this.dateChange();
			},
			dateChange(){
				if(this.dateValue>=new Date(new Date(new Date().toLocaleDateString()).getTime())){
					$("#rightButton").attr("disabled","disabled");
					$("#rightButton").css("color","grey");
					$("#rightButton").addClass("is-disabled");
				}else{
					$("#rightButton").attr("disabled",false);
					$("#rightButton").css("color","#8BC8FA");
					$("#rightButton").removeClass("is-disabled");
				}

				conditionDate = this.dateValue;
				loadList();
			}

		}
	});
</script>
</html>

